<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spd" tagdir="/WEB-INF/tags/admin/"%>
<spd:layout>

<jsp:attribute name="head">
<!-- html的头部内容，如title、css等。 -->
<title>视频列表</title>
<style type="text/css">
.treeview .list-group-item {
	border-radius: 0;
}

</style>
</jsp:attribute>

<jsp:attribute name="body">
<!-- 页面的主要内容 -->
<div class="spd-flex">
	<div style="width:200px;">		
		<div class="box box-solid">
            <div class="box-body no-padding" style="display: block;">
				<ul id="videoCategoryTree" class="ztree" style="width:100%;overflow:auto;"></ul>
            </div>
            <!-- /.box-body -->
		</div>		
	</div>
	<div style="flex:1;padding-left:15px;">
		<div class="row">
			<div class="col-md-12">
				<div class="box box-solid">
					<div class="box-body">
						<form class="form-inline" id="formSearch">
							<input type="hidden" name="videoCategoryId">
							<div class="form-group">
								<input class="form-control" type="text" name="title" placeholder="视频标题" style="width:180px;">
							</div>
							<div class="form-group">
								<select class="form-control" name="status" style="width:150px;">
									<option value="">--视频来源--</option>
									<option value="1">腾讯视频</option>
									<option value="2">爱奇艺</option>
									<option value="3">优酷</option>
								</select>
							</div>
							<div class="form-group">
								<select class="form-control" name="isTop" style="width:150px;">
									<option value="">--是否置顶--</option>
									<option value="0">不置顶</option>
									<option value="1">置顶</option>
								</select>
							</div>
							<div class="form-group">
								<select class="form-control" name="publishStatus" style="width:150px;">
									<option value="">--发布状态--</option>
									<option value="0">未发布</option>
									<option value="1">已发布</option>
								</select>
							</div>
							<div class="form-group">
								<button class="btn btn-primary" id="btnSearch" style="width:100px">查询</button>
							</div>
						</form>
						<!-- /form -->				
					</div>
					<!-- /.box-body -->
				</div>
				<!-- /.box -->
			</div>
		</div>
		<!-- /.row -->
		<div class="row">
			<div class="col-md-12">
				<div class="box box-solid">
					<div class="box-body no-padding">
						<div class="mailbox-controls">							
			                <div class="btn-group">
			                	<button class="btn btn-primary" id="btnAddVideo" style="width:100px;">添加视频</button>
								<button class="btn btn-primary" id="btnEditVideo" style="width:100px;">编辑视频</button>
								<button class="btn btn-primary" id="btnDeleteVideo" style="width:100px;">删除视频</button>
			                </div>
			                <div class="btn-group">
								<button class="btn btn-success" id="btnPlay" style="width:100px;">播放视频</button>
			                </div>
						</div>
						<table id="table"></table>
						<!-- /#table -->
					</div>
					<!-- /.box-body -->
				</div>
			</div>
		</div>
		<!-- /.row -->		
	</div>
</div>
<!-- /.spd-flex -->

</jsp:attribute>

<jsp:attribute name="dialog">
<!-- 页面的dialog，注意不能放到body中 -->
</jsp:attribute>

<jsp:attribute name="script">
<!-- 页面的JS脚本 -->
<script type="text/javascript">
	$(function(){
		$('#btnDeleteVideo').on('click', function(){
			var rows = $('#table').bootstrapTable('getSelections');
			if(rows == null || rows.length === 0){
				SpdUI.alert('请选择视频！');
				return false;
			}
			
			var id = rows[0].id;
			SpdUI.confirm('确定删除视频？', function(){
				SpdUI.getJSON({
					url: SpdUI.contextPath + '/admin/video/delete.do',
					data: {
						id: id
					},
					success: function(data, json){
						$('#table').bootstrapTable('refresh', {
							silent: true
						});
					}
				});
			});
			
			return false;
		});
		
		$('#btnEditVideo').on('click', function(){
			var rows = $('#table').bootstrapTable('getSelections');
			if(rows == null || rows.length === 0){
				SpdUI.alert('请选择视频！');
				return false;
			}
			
			var id = rows[0].id;
			
			SpdUI.addTab({
				id: 'editVideo',
				title: '编辑视频',
				url: SpdUI.contextPath + '/admin/video/editView.do?id=' + id
			});
			
			return false;
		});
		
		$('#btnAddVideo').on('click', function(){
			SpdUI.addTab({
				id: 'addVideo',
				title: '添加视频',
				url: SpdUI.contextPath + '/admin/video/addView.do'
			});
			return false;
		});
		
		$('#btnSearch').on('click', function(){
			$('#table').bootstrapTable('refresh', {
				silent: true
			});
			return false;
		});
		
		SpdUI.getJSON({
			url: SpdUI.contextPath + '/admin/video/category/queryAll.do',
			success: function(data, json){
				var nodes = [];
				$.each(data, function(i, v){
					nodes.push({
						name: v.name,
						id: v.id,
						parentId: v.parentId,
						open: true,
						nodeData: v
					});
				});
				
				nodes.push({
					name: '视频分类',
					id: '0',
					open: true
				});
				
				$.fn.zTree.init($('#videoCategoryTree'), {
					data: {
						simpleData: {
							enable: true,
							pIdKey: 'parentId'
						}
					},
					view: {
						selectedMulti: false
					},
					callback: {
						onMouseDown: function(event, treeId, node){
							if(node.id != '' && node.id != '0'){
								$('#formSearch input[name="videoCategoryId"]').val(node.id);
							}else{
								$('#formSearch input[name="videoCategoryId"]').val('');
							}
							
							$('#table').bootstrapTable('refresh', {
								silent: true
							});
						}
					}
				}, nodes);
				
				/*
				var nodes = [], tops = [];
				
				$.each(data, function(i, v){
					nodes.push({
						text: v.name,
						selectable: false,
						nodeData: v
					});
				});
				
				$.each(nodes, function(i, c){
					var pid = c.nodeData.parentId;
					$.each(nodes, function(j, p){
						if(p.nodeData.id == pid){
							if(!p.nodes){
								p.nodes = [];
							}
							
							p.nodes.push(c);
							p.nodeData.hasChildren = true;
							p.state = {
								expanded: true
							};
							c.nodeData.hasParent = true;
						}
					});
				});
				
				$.each(nodes, function(i, v){
					if(!v.nodeData.hasParent){
						tops.push(v);
					}
				});
				
				$('#newCategoryTreeView').treeview({
					collapseIcon: 'fa fa-2 fa-fw fa-caret-down',
					expandIcon: "fa fa-2 fa-fw fa-caret-right",
					showBorder: false,
					data: tops,
					showIcon: false,
					color: '',
					backColor: '',
					selectable: false
				});
				
				$('#newCategoryTreeView').on('click', '.list-group-item', function(){
					$('#newCategoryTreeView').treeview('selectNode', $(this).data('nodeid'));
				});
				*/
			}
		});
		
		SpdUI.bootstrapTable('#table', {
			clickToSelect: true,
			singleSelect: true,
			url: SpdUI.contextPath + '/admin/video/queryPage.do',
			columns: [{
				checkbox: true
			},{
				title: '',
				field: 'coverImage',
				width: 70,
				formatter: function(value, row, index) {
					return value ? '<img style="margin:0;padding:0;width:50px;height:50px;" src="' + SpdUI.contextPath + value + '?_ts=' + new Date().getTime() + '">' : '';
				}
			},{
				title: '标题',
				field: 'title'
			},{
				title: '是否置顶',
				field: 'isTop',
				width: 110,
				formatter: function(value, row, index) {
					return {
						0: '否',
						1: '是'
					}[value];
				}
			},{
				title: '发布状态',
				field: 'publishStatus',
				width: 110,
				formatter: function(value, row, index) {
					return {
						0: '未发布',
						1: '已发布'
					}[value];
				}
			},{
				title: '最后修改时间',
				field: 'operateTime',
				width: 180,
				formatter: function(value, row, index) {
					return value ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '';
				}
			},{
				title: '最后修改人',
				field: 'operateName',
				width: 130
			},{
				title: '操作',
				field: 'id',
				width: 130,
				visible: false,
				formatter: function(value, row, index) {
					var html = '';
					html += '<div class="btn btn-xs btn-primary btn-row-edit">编辑</div>&nbsp;';
					html += '<div class="btn btn-xs btn-default btn-row-delete">删除</div>';
					return html;
				},
				events: {
					'click .btn-row-edit': function(event, value, row, index) {
					},
					'click .btn-row-delete': function(event, value, row, index) {
						SpdUI.confirm('确定删除？', function(){
							SpdUI.getJSON({
								url: SpdUI.contextPath + '/admin/video/delete.do?id=' + row.id,
								success: function(data, json){
									$('#table').bootstrapTable('refresh', {
										silent: true
									});
								}
							});
						});
					}
				}
			}],
			queryParams: function(params) {
				var $form = $('#formSearch');
				params = $.extend(params, SpdUI.formToObject($form));
				return params;
			}
		});
	});
</script>
</jsp:attribute>

</spd:layout>